<template>
    <div class="container" :style="'min-height: '+docheight+'px'">
      <div v-if="!showTimeOut&&showCont">
        <div class="orderHead">
            <serch-com placher="请输入商品名称" @serchClick="serchFn" color="#6d94f8"></serch-com>
        </div>
        <div class="mainCont">
          <div class="mainList">
            <div class="cosList maxCosList">
              <div class="maxCosItem" @click="goDetail(item)" :key="index" v-for="(item,index) in goodsArr">
                <div class="cosImg">
                  <img :src="item.goods_image+ossSrc" />
                  <div class="sortNum" v-if="item.activity_name!=''">{{ item.activity_name }}</div>
                </div>
                <div class="cosItemInfo">
                  <div class="cosName">
                    {{ item.goods_name }}
                  </div>
                  <div class="cosDes">销量：{{ item.goods_sale }}</div>
                  <div class="cosPrice">
                    <div>¥ {{ item.goods_price }}</div>
                    <div style="font-size: 0.6rem;margin-left: 0.15rem;">起</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="loadMore" v-if="goodsArr.length>0">{{ loadMoreText }}</div>
            <nodata v-if="goodsArr.length==0" text="暂无该类商品~"></nodata>         
          </div>
        </div>
        
      </div>
      <footcpm></footcpm>
      <getLoad v-if="!showCont"></getLoad>
      <toast v-model="showToast" position="middle" width="50%" type="text" :time="1000">{{showText}}</toast>
      <getTimeOut v-if="showTimeOut"></getTimeOut>
    </div>
  </template>
  
  <script>
  import footcpm from '@/components/footcpm'
  import {allGoods} from "@/http/api";
  import nodata from '@/components/public/nodata'
  
  import getLoad from '@/components/public/getLoad'
    import getTimeOut from '@/components/public/getTimeOut'
    import {Toast } from 'vux'
    import serchCom from '@/components/public/serchCom.vue'

    export default {
      components: {serchCom,nodata,Toast,getLoad,getTimeOut,footcpm},
      data() {
        return {
          showTimeOut:false,
          showCont:false,
          showText:'',
          showToast:false,
          goodsArr:[],
          loadMoreText:'数据加载中~',
          last_page:0,
          page:1,
          per_page:10,
          getting:false,
          serchKey:'',
        }
      },
      props: {},
      methods:{
        goDetail(item){
          this.$router.push({path:'/detail',query:{id:item.goods_id}})
        },
        serchFn(val){
            this.serchKey = val
            this.page = 1
            this.last_page = 0
            this.goodsArr = []
            this.getGoods()
        },
        getGoods(){
          let data ={
            page:this.page,
            per_page:this.per_page,
            search:this.serchKey,
          }
          allGoods(data).then((res)=>{
            if(res.data.code==1){
              let arr = res.data.data.data
              for(let i=0;i<arr.length;i++){
                this.goodsArr.push(arr[i])
              }
              setTimeout(() => {
                this.getting = false
              }, 100);
              this.last_page = res.data.data.last_page
              if(this.page==this.last_page){
                this.loadMoreText = '到底啦～'
              }else{
                this.loadMoreText = '数据加载中~'
              }
            }else{
              this.showToast = true
              this.showText = res.data.msg
            }
            this.showCont= true
          }).catch(()=>{
              this.showTimeOut = true
              this.showCont= true
            })
        },
        nextfn(){
        if(this.$route.path=='/allGoods'){
          let h = document.documentElement.scrollHeight||document.body.scrollHeight
          let wh = document.documentElement.clientHeight||document.body.clientHeight
          let top = document.documentElement.scrollTop||document.body.scrollTop
          let bottom = h-wh-top
          if(bottom<=50){
            if(this.getting==false){
              if(this.last_page>this.page){
                this.getting=  true
                this.page++
                this.getGoods()
              }
            }
          }
        }
      },
      },
      mounted(){
        window.addEventListener('scroll',this.nextfn)
      },
      created() {
        this.getGoods()
      },
    }
  </script>
  
  <style scoped lang="less">
  .container {
    padding-bottom: 1.75rem;
    box-sizing: border-box;
    padding-top: 3.5rem;
    background-color: #edf2ff;
    .orderHead{
        width: 100%;
        background-color: #fff;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 100;
        
        .orderTop{
        width: 100%;
        padding: 0 4%;
        box-sizing: border-box;
        background-color: #fff;
        .orderNav{
            width: 100%;
            display: flex;
            position: relative;
            justify-content: space-between;
            .navItem,.navItem_active{
            width: 25%;
            text-align: center;
            padding: 0.75rem;
            box-sizing: border-box;
            font-size: 0.7rem;
            color: #666;
            white-space: nowrap;
            }
            .navItem_active{
            color: #6d94f8;
            border-bottom: 1px solid #6d94f8;
            }
        }
        }
    }
    .mainCont{
      width: 100%;
      position: relative;
      // background-color: #fff;
      border-radius: 0.75rem;
      overflow: hidden;
      padding: 0 4%;
      box-sizing: border-box;

      .mainList{
        width: 100%;
        margin-top: 0.75rem;
        margin-bottom: 1.25rem;
        background-color: #fff;
        padding: 0.75rem 4%;
        box-sizing: border-box;
        border-radius: 0.75rem;
       
        .cosList{
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          .cosItem,.maxCosItem{
            width: 30%;
            margin-left: 5%;
            margin-bottom: 0.75rem;
            .cosImg{
              width: 100%;
              position: relative;
              border-radius: 0.25rem;
              overflow: hidden;
              font-size: 0;
              .sortNum{
                position: absolute;
                padding: 0.25rem 0.5rem;
                // font-size: 0.6rem;
                left: 0;
                font-size: 0.6rem;
                top: 0;
                background-color: #6d94f8;
                color: white;
                border-radius: 0 0 0.25rem 0;
              }
              img{
                width: 100%;
              }
            }
            .cosItemInfo{
              .cosName{
                  width: 100%;
                  margin-top: 0.25rem;
                  margin-bottom: 0.25rem;
                  font-size: 0.7rem;
                  font-weight: bold;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  overflow: hidden;
                }
                .cosDes{
                  color: #999;
                  font-size: 0.6rem;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  overflow: hidden;
                }
                .cosPrice{
                  display: flex;
                  align-items: center;
                  color: #6d94f8;
                  font-size: 0.8rem;
                  margin-top: 0.25rem;
                  .svipTag{
                    // font-size: 0.6rem;
                    // background-color: #6d94f8;
                    // color: white;
                    // padding: 0.1rem 0.5rem;
                    // margin-right: 0.25rem;
                    // border-radius: 0.25rem;
                  }
                }
                .minPrice{
                  font-size: 0.6rem;
                }
            }
            
          }
          .maxCosItem{
           width: 48%;
           margin-left: 0;
          }
          .noLeft{
            margin-left: 0;
          }
        }
        .maxCosList{
          justify-content: space-between;
        }
        .loadMore{
          text-align: center;
          padding: 0.75rem 0;
          font-size: 0.6rem;
          color: #6d94f8;
        }
      }
    }
  }
  </style>
  <style >
  .van-notice-bar{
    padding: 0;
    box-sizing: border-box;
  }
  </style>
  